<template>
	<view class="root">
		<view>
			<view class="groupTitle"><text>病例资料</text></view>
			<view class="actionTitle"><text>图片上传(最多9张图片)</text></view>
			<view class="actionGroup">
				<view class="actionItem" v-for="(item,index) in imgs.BL" :key="item.id">
					<!-- <uni-icons class="deleteImg" type="clear" size="30" @click="deleteImg('BL',index)"></uni-icons> -->
					<image style="width: 100%;height: 100%;" :src="item.url" @click="previewImage('BL',index)"></image>
				</view>
				<!-- <view class="actionItem" v-if="imgs.BL.length < 9">
					<uni-icons type="camera" size="100" @click="selectImg('BL')"></uni-icons>
				</view> -->
			</view>
		</view>

		<view>
			<view class="groupTitle"><text>社会保障卡</text></view>
			<view class="actionTitle"><text>图片上传(正反两面)</text></view>
			<view class="actionGroup">
				<view class="actionItem" v-for="(item,index) in imgs.SHBZK" :key="item.id">
					<!-- <uni-icons class="deleteImg" type="clear" size="30" @click="deleteImg('SHBZK',index)"></uni-icons> -->
					<image style="width: 100%;height: 100%;" :src="item.url" @click="previewImage('SHBZK',index)"></image>
				</view>
				<!-- <view class="actionItem" @click="selectImg('SHBZK')" v-if="imgs.SHBZK.length < 2">
					<uni-icons type="camera" size="100"></uni-icons>
				</view> -->
			</view>
		</view>
		<view>
			<view class="groupTitle"><text>身份证</text></view>
			<view class="actionTitle"><text>图片上传(正反两面)</text></view>
			<view class="actionGroup">
				<view class="actionItem" v-for="(item,index) in imgs.SFZ" :key="item.id">
					<!-- <uni-icons class="deleteImg" type="clear" size="30" @click="deleteImg('SFZ',index)"></uni-icons> -->
					<image style="width: 100%;height: 100%;" :src="item.url" @click="previewImage('SFZ',index)"></image>
				</view>
				<!-- <view class="actionItem" @click="selectImg('SFZ')" v-if=" imgs.SFZ.length < 2">
					<uni-icons type="camera" size="100"></uni-icons>
				</view> -->
			</view>
		</view>
		
		<view class="actionButtonGroup">
			<button class="actionButton" @click="save">返 回</button>
		</view>
	</view>
</template>

<script lang="ts">
	
	import { StorageUtil } from '@/storage/StorageUtil'
	import { localStoreService } from "@/service/LocalStoreService"
	
	import { route,routeMixin } from "@/route/Route"
	export default {
		mixins:[routeMixin],
		data() {
			return {
				imgs: {
					SHBZK: [],
					SFZ: [],
					BL: [],
				},
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "现场视频"
			})
		},
		methods: {
			routeParameterEvent(data) {
				this.routeParameter = data
				localStoreService.list({ywid:data.bisZhsqId,fjlbs:'BL,SFZ,SHBZK'},(res)=>{
					for(let file of res){
						switch(file.fjlb){
						    case 'BL':
								file.url = file.path
								this.imgs.BL = [...this.imgs.BL,file]
						        break;
						    case 'SFZ':
							
								file.url = file.path
								this.imgs.SFZ = [...this.imgs.SFZ,file]
						        break;
						    case 'SHBZK':
							
								file.url = file.path
								this.imgs.SHBZK = [...this.imgs.SHBZK,file]
						        break;
						    default:
						        break;
						}
					}
					console.log(res)
					
				})
			},
			selectImg(type) {
				
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: process.env.VUE_APP_TICK_HTTP__BASE_PATH + '/api/minio/mp/uploadImage', 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								fjlb: type,
								ywid: _this.routeParameter.bisZhsqId
							},
							header:{
								Authorization: StorageUtil.getStorage(StorageUtil.TOKEN)
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)
								_this.imgs[type] = [..._this.imgs[type],res.data]
								// switch (type){
								// 	case 1:
								// 		_this.medicalRecordImgs = [..._this.medicalRecordImgs,res.data]
								// 		_this.medicalRecordImgsUrl = [..._this.medicalRecordImgsUrl,res.data.url]
								// 		break
										
								// 	case 2:
								// 		_this.sinCardImgs = [..._this.medicalRecordImgs,res.data]
								// 		_this.sinCardImgsUrl = [..._this.medicalRecordImgsUrl,res.data.url]
								// 		break
									
								// 	case 3:
								// 		_this.idCardImgs = [..._this.medicalRecordImgs,res.data]
								// 		_this.idCardImgsUrl = [..._this.medicalRecordImgsUrl,res.data.url]
								// 		break
								// }
							}
						});
					}
				});
			},
			previewImage(type,index){
				let urls = []
				this.imgs[type].map((item,index)=>{
					urls = [...urls,item.url]
				})
				console.log(urls)
				// 预览图片
				uni.previewImage({
					current: index,
					loop: true,
					urls: urls,
				});
			},
			deleteImg(type,index){
				localStoreService.deleteFile([this.imgs[type][index].id],(res)=>{
					console.log(res)
					this.imgs[type].splice(index,1)
				})
			},
			save(){
				route.goBack()
			}
		}

	}
</script>

<style lang="scss">
	.root {
		display: flex;
		flex-direction: column;
	}

	.groupTitle {
		height: 80rpx;
		background-color: $uni-bg-color-grey;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.actionTitle {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 28rpx;
	}

	.actionGroup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
	}

	.actionItem {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
		border: 4rpx $uni-bg-color-grey solid;
		position: relative;
	}
	.deleteImg{
		color: red !important;
		font-size: 60rpx !important;	
		position: absolute;
		z-index: 9;
		right: -30rpx;
		top: -30rpx;
	}
	.actionButtonGroup{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: -webkit-fill-available;
		margin: 30rpx;
	}
	.actionButton{
		width: 580rpx;
		// margin: 20rpx;
		background-color: $uni-primary;
		color: $uni-white;
	}
</style>
